<template>
  <div class="box">
    <!-- 导航条 -->
    <div class="nav">
    <van-nav-bar title="确认订单">
      <template #left>
        <van-icon @click="backCart()" name="arrow-left" size="20" color="black" />
      </template>
    </van-nav-bar>
    </div>
    <!-- 地址信息 -->
    <hr />
    <div class="divs" v-for="(item,index) in addList" :key="index">
      <div class="divs1">
        <div class="title">
          <div>
            <h2>{{item.username}}</h2>
          </div>
          <div>
            <h3>{{item.phone}}</h3>
          </div>
        </div>
        <div class="add">
          <h2>
            {{item.addressDetailVo.sheng}}
            {{item.addressDetailVo.shi}}
            {{item.addressDetailVo.xian}}
            {{item.address}}
          </h2>
        </div>
      </div>
      <div class="divs2">
        <van-icon name="arrow" class="icon" @click="toAdd" />
      </div>
    </div>
    <!-- 商品信息 -->
    <!-- 购物车商品信息 -->
    <div class="cart-good" v-for="(item,index) in cartGood" :key="index">
      <div>
        <img class="good-img" :src="item.productPic" />
      </div>
      <div class="good-infor">
        <div class="good-name">{{item.productVo.name}}</div>
        <div class="class-resord">
          <div class="good-class">型号：{{item.productVo.model}}</div>
          <div class="good-price">￥{{item.productVo.price}}</div>
        </div>
      </div>
    </div>
    <!-- 优惠券 -->
    <!-- 优惠券单元格 -->
    <van-coupon-cell :coupons="coupons" :chosen-coupon="chosenCoupon" @click="showList = true" />
    <!-- 优惠券列表 -->
    <van-popup v-model="showList" round position="bottom" style="height: 90%; padding-top: 4px;">
      <van-coupon-list
        :coupons="coupons"
        :chosen-coupon="chosenCoupon"
        :disabled-coupons="disabledCoupons"
        @change="onChange"
        @exchange="onExchange"
      />
    </van-popup>
    <!-- 选择快递方式 -->
    <div>
      <van-cell is-link title="选择快递" @click="show = true">
        <span>圆通快递</span>
      </van-cell>
      <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
    </div>
    <van-action-sheet
      v-model="show"
      :actions="actions"
      cancel-text="取消"
      close-on-click-action
      @cancel="onCancel"
    />
    <!-- 选择支付方式 -->
    <div class="apply">
      <div class="apply1">
        <div class="item1">
          <img src="static/images/Alipay.png" class="img" />
          <span>&nbsp;&nbsp;&nbsp;&nbsp;支付宝</span>
        </div>
        <div>
          <input type="radio" name="pay" id="1" />
        </div>
      </div>
      <!-- <div class="apply2">
        <div class="item2">
          <img src="static/images/Wechat.png" class="img" />
          <span>微信支付</span>
        </div>
        <div>
          <input type="radio" name="pay" id="2" />
        </div>
      </div>-->
    </div>
    <div class="total">
      <div class="total1">
        <div class="txt1">商品总额</div>
        <div class="txt2">￥{{this.$route.query.Price}}</div>
      </div>
      <div class="total2">
        <div class="txt1">运费</div>
        <div class="txt2">+￥0</div>
      </div>
    </div>

    <!-- 底部支付按钮 -->
    <div class="pay">
      <div class="pay1">
        &nbsp;&nbsp;&nbsp;
        <h1>实付款</h1>&nbsp;&nbsp;&nbsp;&nbsp;
        <p class="price-num">￥{{this.$route.query.Price}}</p>
      </div>
      <div class="pay2">
        <van-button color="orangered" @click="toPay">去支付</van-button>
      </div>
    </div>
    <!-- 支付宝哦 -->
    <div></div>
    <div class="null"></div>
  </div>
</template>
<script>
import axios from 'axios';
import { Toast } from 'vant';
const coupon = {
  available: 1,
  condition: '无使用门槛\n最多优惠12元',
  reason: '',
  value: 150,
  name: '优惠券名称',
  startAt: 1489104000,
  endAt: 1514592000,
  valueDesc: '1.5',
  unitDesc: '元'
};
export default {
  data() {
    return {
      // 购物车商品信息
      cartGood: [],
      //地址列表
      addList: [],
      // 优惠劵
      chosenCoupon: -1,
      coupons: [coupon],
      disabledCoupons: [coupon],
      showList: false,
      //订单模块
      radio: '1',
      arrDes: [],
      price: '',
      //选择快递展示页面
      show: false,
      actions: [{ name: '圆通快递         ￥0' }],
      //支付参数
      payNum: ''
    };
  },
  computed: {
    // totalPrice: function() {
    //   var totalValue = 0;
    //   for (let i = 0; i < this.cartGood.length; i++) {
    //     totalValue =
    //       parseFloat(this.cartGood[i].productVo.price) *
    //         parseInt(this.cartGood[i].count) +
    //       totalValue;
    //   }
    //   this.price = totalValue;
    //   return totalValue;
    // }
  },
  mounted() {
    console.log('res多少钱',this.$route.query.Price)
    // this.list2=cartGood;
    console.log('打印从购物车获取的数据', this.$route.query.list);
    this.cartGood = this.$route.query.list;
    //获取地址数据
    axios
      .post(
        '/api/findAddress',
        {},
        {
          params: {
            // 传参:地址;优惠券;满额赠送?
            userNum: '8c4bcdfa-cff7-4cfe-82b0-85a493b59b34'
          }
        }
      )
      .then(res => {
        console.log(res);
        // this.price = totalPrice;
        this.addList = res.data.data;
        console.log('地址管理', this.addList);
        console.log('地址管理res', res);
      });
    //优惠券获取后台接口
    axios
      .post(
        '/api/fuhe',
        {},
        {
          params: {
            // 传参:地址;优惠券;满额赠送?
            userNum: '8c4bcdfa-cff7-4cfe-82b0-85a493b59b34',
            sumMoney: this.$route.query.Price
          }
        }
      )
      .then(res => {
        console.log(res);
        console.log('优惠券获取后台接口', res);
      });
  },
  methods: {
    backCart() {
      this.$router.push({
        name: '商城'
      });
    },
    onChange(index) {
      this.showList = false;
      this.chosenCoupon = index;
    },
    onExchange(code) {
      this.coupons.push(coupon);
    },
    toAdd() {
      alert('跳转到地址管理页面');
    },
    //点击快递--取消按钮
    onCancel() {
      Toast('取消');
    },
    onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show = false;
      Toast(item.name);
    },

    //跳转支付
    toPay() {
      // alert('支付页面');
      console.log('支付时价钱',this.price)
      axios({
        url: '/api/order/create',
        method: 'post',
        data: {
          list: [
            {
              userNum: '02d2b3be-1295-481c-ba67-b82a30080135',
              productId: '1',
              count: '1'
            },
            {
              userNum: '02d2b3be-1295-481c-ba67-b82a30080135',
              productId: '2',
              count: '1'
            }
          ],
          addressId: 1,
          expressType: 1,
          payPrice: this.price
        }
      }).then(res => {
        console.log('第一次结果', res);
        console.log('第一次请求', res.data.data);
        this.payNum = res.data.data;
        axios
          .post(
            '/api/pay/h5PagePay',
            {},
            {
              //第二次请求参数
              params: {
                orderNo: res.data.data
              }
            }
          )
          .then(res => {
            console.log('第二次请求的结果', res);
            console.log('第二次请求', res.data.data);
            //拉取支付宝
            const div = document.createElement('div');
            div.innerHTML = res.data.data;
            document.body.appendChild(div);
            //调用form表单
            document.forms[0].submit();
          });
      });
    }
  }
};
</script>
<style scoped>
.nav{
  position: sticky;
  top:0;
}
.cart-good {
  padding-top: 1rem;
  border-top: 1.5rem solid whitesmoke;
  display: flex;
  justify-content: space-evenly;
  border-bottom: solid 1.5rem whitesmoke;
  padding-bottom: 1rem;
}
.divs {
  display: flex;
  height: 6rem;
  border-bottom: 15px solid whitesmoke;
  border-top: 5px solid whitesmoke;
  justify-content: space-between;
  background-color: white;
  align-items: center;
}
.ins {
  display: flex;
  flex-direction: column;
  justify-content: start;
}
.price-num {
  color: orangered;
  font-size: 1.8rem;
}
.pay1 {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
}
.pay {
  display: flex;
  flex-direction: row;
  position: fixed;
  bottom: 0;
  width: 37.5rem;
  border: 4px solid whitesmoke;
  justify-content: space-between;
  align-items: center;
}
.item1,
.item2 {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.img {
  width: 3rem;
  height: 3rem;
}
.divs2 {
  padding-right: 1rem;
}
.total {
  display: flex;
  margin: 1rem 0rem;
  border-top: whitesmoke 15px solid;
  border-bottom: whitesmoke 15px solid;
  flex-direction: column;
  justify-content: start;
  /* align-items: center; */
}
.total1,
.total2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.apply {
  display: flex;
  padding-top: 1rem;
  border-top: whitesmoke 10px solid;
  flex-direction: column;
}
.apply1,
.apply2 {
  display: flex;
  margin: 0.5rem;
  align-items: center;
  justify-content: space-between;
}
.txt1,
.txt2 {
  font-size: 1.6rem;
}
.txt1 {
  padding-left: 0.6rem;
}
.txt2 {
  color: orangered;
  padding-right: 0.6rem;
}
.title {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 1rem;
  justify-content: space-between;
}
.add {
  padding-left: 1rem;
}
.good-img {
  width: 8rem;
  height: 10rem;
}
.good-count {
  text-align: center;
  width: 2rem;
}
.good-num {
  width: 2rem;
  height: 2rem;
}
.cart-goodnum {
  display: flex;
  justify-content: space-evenly;
}
.good-price {
  color: orangered;
  font-size: 2rem;
  font-weight: bolder;
}
.good-name {
  width: 20rem;
  height: 4rem;
  margin-left: 2rem;
  font-size: 1.5rem;
}
.good-class {
  width: 20rem;
  height: 2rem;
  border: 0.1rem solid gray;
  margin-left: 2rem;
}
.good-infor {
  height: 10rem;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.null{
  width: 100%;
  height: 6rem;
}
</style>